import React, { useEffect,useState } from 'react';
import '../../../style/vipdetails.scss'
import { Button, Tag, Modal, Input, Progress, Form,Radio,notification } from 'antd';
import { useNavigate, useLocation } from 'react-router-dom'
import { useForm } from 'antd/es/form/Form';
import { vipsearch_edit, vipsearch_sea } from '../../../utils/Vipmanagr';
import card from './card.svg'
const { CheckableTag } = Tag;

function Vipdetails(props) {
    const [form] = Form.useForm();
    const location = useLocation();
    //input框的值
    var [value,setValue] = useState("")
    //请求到的数据
    var [datalist,setDatalist] = useState([])
    //请求参数
    var key = location.state

    useEffect(()=>{
        vipsearch_sea({ key_like:key}).then((res)=>{
            setDatalist(res.data)
        })
    },[])
    // 监听  为表单注入数据
    useEffect(()=>{
        form.setFieldsValue({
            'vipname': datalist.length > 0 && datalist[0].vipname,
            'phone': datalist.length > 0 && datalist[0].phone,
            'age': datalist.length > 0 && datalist[0].age,
            'consignee': datalist.length > 0 && datalist[0].consignee,
            'address': datalist.length > 0 && datalist[0].address,
            'remarks': datalist.length > 0 && datalist[0].remarks,
            'grade': datalist.length > 0 && datalist[0].grade,
        })
    }, [datalist.length > 0 && datalist])

    // 多个对话框的控制
    const [isModalOpen0, setIsModalOpen0] = useState(false);
    const [isModalOpen1, setIsModalOpen1] = useState(false);
    const [isModalOpen2, setIsModalOpen2] = useState(false);
    const [isModalOpen3, setIsModalOpen3] = useState(false);
    const [isModalOpen4, setIsModalOpen4] = useState(false);
    const [isModalOpen5, setIsModalOpen5] = useState(false);


    //对话框打开
    const showModal = (e) => {
        switch (e.target.innerHTML){
            case '编辑资料':
                setIsModalOpen0(true); break;
            case '修改积分':
                setIsModalOpen1(true);break;
            case '修改成长值':
                setIsModalOpen2(true); break;
            case '充值':
                setIsModalOpen3(true); break;
            case '查看会员卡':
                setIsModalOpen4(true); break;
            case '查看':
                setIsModalOpen5(true); break;
        }

    };

    //点击确认按钮们
    const handleOk1 = () => {
        vipsearch_edit(key, { integral: value }).then((res)=>{
            vipsearch_sea({ key_like: key }).then((res) => {
                setDatalist(res.data)
            })
        })
        setIsModalOpen1(false);
    };
    const handleOk2 = () => {
        vipsearch_edit(key, { amount: value }).then((res) => {
            vipsearch_sea({ key_like: key }).then((res) => {
                setDatalist(res.data)
            })
        })
        setIsModalOpen2(false);
    };
    const handleOk3 = () => {
        var sum = value/1 + datalist[0].balance/1
        vipsearch_edit(key, { balance: sum }).then((res) => {
            vipsearch_sea({ key_like: key }).then((res) => {
                setDatalist(res.data)
            })
        })
        setIsModalOpen3(false);
    };


    //点击取消按钮
    const handleCancel = () => {
        setIsModalOpen0(false);
        setIsModalOpen1(false);
        setIsModalOpen2(false);
        setIsModalOpen3(false);
        setIsModalOpen4(false);
        setIsModalOpen5(false);
    };

    //input框内容改变时触发的函数
    var onChange = (e)=>{
        setValue(e.target.value)
    }
    //表单校验通过时触发的回调
    const onFinish = (values) => {
        vipsearch_edit(key, {vipname:values.vipname,phone:values.phone,sex:values.sex,grade:values.grade,consignee:values.consignee,address:values.address,remarks:values.remarks}).then((res) => {
            vipsearch_sea({ key_like: key }).then((res) => {
                setDatalist(res.data)
            })
            notification.success({
                placement: "top",
                message: '修改成功'
            })
        })
        setIsModalOpen0(false);
    };


    return (
        // <></>
        <div className='vipdetails'>
            <div className="detailsheader">
                <span>会员管理 / 付费会员卡</span>
                <h2>付费会员卡</h2>
            </div>
            <div className="basicinfo">
                <p className='title'>基础资料</p>
                <div className="info">
                    <div className="box1">
                        <img src={datalist.length>0 && datalist[0].pic} alt="" />
                        <Button onClick={showModal} type="primary" htmlType="submit">编辑资料</Button>
                        <Modal title="编辑基础资料" open={isModalOpen0} footer={null}>
                            <Form
                                form={form}
                                name="basic"
                                onFinish={onFinish}
                            >
                                <Form.Item
                                    label="会员姓名"
                                    name="vipname"
                                    rules={[{ required: true, message: '请输入会员姓名!' }]}
                                >
                                    <Input/>
                                </Form.Item>
                                <Form.Item
                                    label="联系方式"
                                    name="phone"
                                    rules={[{ required: true, message: '请输入手机号!' }, { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' }]}
                                >
                                    <Input />
                                </Form.Item>
                                <Form.Item name="sex" label="会员性别" rules={[{ required: true, message: '请选择性别!' }]}>
                                    <Radio.Group>
                                        <Radio value="女">女</Radio>
                                        <Radio value="男">男</Radio>
                                    </Radio.Group>
                                </Form.Item>
                                <Form.Item
                                    label="会员年龄"
                                    name="age"
                                    rules={[{ required: true, message: '请输入年龄!' }]}
                                >
                                    <Input/>
                                </Form.Item>
                                <Form.Item
                                    label="会员等级"
                                    name="grade"
                                    rules={[{ required: true, message: '请输入会员等级!' }]}
                                >
                                    <Input />
                                </Form.Item>

                                <Form.Item
                                    label="常用收货人"
                                    name="consignee"
                                    rules={[{ required: true, message: '请输入收货人!' }]}
                                >
                                    <Input/>
                                </Form.Item>
                                <Form.Item
                                    label="详细地址"
                                    name="address"
                                    rules={[{ required: true, message: '请输入地址!' }]}
                                >
                                    <Input/>
                                </Form.Item>
                                <Form.Item
                                    label="会员备注"
                                    name="remarks"
                                >
                                    <Input/>
                                </Form.Item>
                                <Form.Item>
                                    <Button type="primary" htmlType="submit">保存</Button>
                                    <Button onClick={() => { setIsModalOpen0(false) }} style={{ marginLeft: 340 }}>取消</Button>
                                </Form.Item>
                            </Form>
                        </Modal>
                    </div>
                    <div className="box2">
                        <ul>
                            <li>会员姓名：{datalist.length > 0 && datalist[0].vipname}</li>
                            <li>会员性别：{datalist.length > 0 && datalist[0].sex}</li>
                            <li>常用收货人：{datalist.length > 0 && datalist[0].consignee}</li>
                            <li>来源方式：{datalist.length > 0 && datalist[0].origin}</li>
                        </ul>
                    </div>
                    <div className="box3">
                        <ul>
                            <li>会员手机：{datalist.length>0&&datalist[0].phone}</li>
                            <li>会员年龄：{datalist.length>0&&datalist[0].age}</li>
                            <li>详细地址：{datalist.length>0&&datalist[0].address}</li>
                            <li>会员备注：{datalist.length>0&&datalist[0].remarks}</li>
                        </ul>
                    </div>
                    <div className="box4">
                        <ul>
                            <li>会员卡号：{datalist.length>0&&datalist[0].phone}</li>
                            <li>微信昵称：{datalist.length>0&&datalist[0].wechat}</li>
                            <li>会员等级：{datalist.length>0&&datalist[0].grade}</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div className="tag">
                <p className='title'>会员标签</p>
                <div className='tags'>
                    {
                        datalist.length > 0 && datalist[0].tags.map((item, index) => {
                            return (
                                <Tag key={index}>{item}</Tag>
                            )
                        })
                    }
                </div>
            </div>
            <div className="assets">
                <p className="title">会员资产</p>
                <div className="assetsinfo">
                    <div className='infos'>
                        <div>累计积分</div>
                        <div>{datalist.length > 0 && datalist[0].integral}</div>
                        <a onClick={(e) => { showModal (e)}}>修改积分</a>
                        <Modal title="修改积分" open={isModalOpen1} onOk={handleOk1} onCancel={handleCancel} okText={'确认'} cancelText={'取消'}>
                            <p>当前积分</p>
                            <Input value={datalist.length > 0 && datalist[0].integral} style={{marginBottom:20}}/>
                            <p>修改</p>
                            <Input placeholder="请输入" onChange={onChange}/>
                        </Modal>
                    </div>

                    <div className='infos'>
                        <div>累计成长值</div>
                        <div>{datalist.length > 0 && datalist[0].amount}</div>
                        <a onClick={(e) => { showModal(e) }}>修改成长值</a>
                        <Modal title="修改成长值" open={isModalOpen2} onOk={handleOk2} onCancel={handleCancel} okText={'确认'} cancelText={'取消'}>
                            <p>当前成长值</p>
                            <Input value={datalist.length > 0 && datalist[0].amount} style={{ marginBottom: 20 }} />
                            <p>修改</p>
                            <Input placeholder="请输入" onChange={onChange} />
                        </Modal>
                    </div>

                    <div className='infos'>
                        <div>付费会员卡</div>
                        <div style={{color:"orange"}}>已过期</div>
                        <a onClick={(e) => { showModal(e) }}>查看会员卡</a>
                        <Modal okButtonProps={{ style: { display: 'none' } }} title="付费会员详情" open={isModalOpen4}  onCancel={handleCancel}  cancelText={'关闭'} getContainer={false} >
                            <div className="supercardbx1">
                                <img src={card} alt="" />
                                <div className="text1">
                                    <h1>超级会员</h1>
                                    <p>有效期至：2022年9月10号到期</p>
                                    <p>预计为您节省<span>888</span>元/年</p>
                                </div>
                            </div>
                            <div className="lis1">
                                <ul>
                                    <li>开卡条件： <span>付费1200元</span></li>
                                    <li>开卡日期： <span>2020年9月9日</span></li>
                                    <li>有效期： <span>2022年9月10日</span></li>
                                    <li>会员权益：
                                        <span>
                                            <ul>
                                                <li>成长加速</li>
                                                <li>商品折扣</li>
                                                <li>积分翻倍</li>
                                            </ul>
                                        </span>
                                    </li>
                                </ul>
                            </div>
                        </Modal>
                    </div>

                    <div className='infos'>
                        <div>会员等级</div>
                        <div>{datalist.length > 0 && datalist[0].grade}</div>
                        <a onClick={(e) => { showModal(e) }}>查看</a>
                        <Modal okButtonProps={{ style: { display: 'none' } }} title="付费会员详情" open={isModalOpen5} onCancel={handleCancel} cancelText={'关闭'} getContainer={false} >
                            <div className="supercardbx2">
                                <h1>白金会员</h1>
                                <p><span>560</span>/1000</p>
                                <Progress percent={50} showInfo={false} strokeColor={"white"}/>
                                <p>成长值 距离升级还有440成长值</p>
                            </div>
                            <div className="lis2">
                                    <span>会员权益：</span>
                                    <ul>
                                        <li>成长加速</li>
                                        <li>商品折扣</li>
                                        <li>积分翻倍</li>
                                    </ul>
                            </div>
                        </Modal>
                    </div>

                    <div className='infos'>
                        <div>储值卡余额（元）</div>
                        <div>{datalist.length > 0 && datalist[0].balance}</div>
                        <a onClick={(e) => { showModal(e) }}>充值</a>
                        <Modal title="储蓄卡充值" open={isModalOpen3} onOk={handleOk3} onCancel={handleCancel} okText={'确认'} cancelText={'取消'}>
                            <p>当前金额</p>
                            <Input value={datalist.length > 0 && datalist[0].balance} style={{ marginBottom: 20 }} />
                            <p>充值</p>
                            <Input placeholder="请输入" onChange={onChange} />
                        </Modal>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default Vipdetails;